<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" style="text-align: left" :model="ruleFormData">
      <el-form-item label="字典名称：">
        <el-input v-model="ruleFormData.name" prop="name" placeholder="输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input v-model="ruleFormData.createUserName" prop="createUserName" placeholder="输入创建人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="ListData">查询</el-button>
      </el-form-item>
    </el-form>
    <br>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="序号" width="55"> </el-table-column>
      <el-table-column prop="name" label="名称" width="100"> </el-table-column>
      <el-table-column prop="dtCode" label="代码" width="150">
      </el-table-column>
      <el-table-column prop="dtValue" label="值" width="100"> </el-table-column>
      <el-table-column prop="enable" label="是否可用" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.enable == true">启用</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="sortNo" label="排序号" width="100">
      </el-table-column>
      <el-table-column prop="description" label="描述" width="150">
      </el-table-column>
      <el-table-column prop="typeId" label="分类标识" width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" :formatter="formatDate">
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人" width="100">
      </el-table-column>
      <el-table-column prop="updateTime" label="最后更新时间" width="180" :formatter="formatDate">
      </el-table-column>
      <el-table-column prop="updateUserName" label="最后更新人" width="100">
      </el-table-column>
      <el-table-column prop="" label="操作" width="200">
        <el-link type="primary">状态</el-link>
        <el-link type="primary">配置</el-link>
        <el-link type="primary">删除</el-link>
        <el-link type="primary" @click="dialogVisible = true">修改</el-link>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="ruleFormData.pageIndex" :page-sizes="[2, 4, 6, 8]" :page-size="ruleFormData.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>
  </div>
</template>

<script>
import { GetCategoryPage } from "@/api/SysManagecopy/Category";

export default {
  data() {
    return {
      ruleFormData: {
        pageIndex: 1,
        pageSize: 2,
        typeId: "",
        unitType: "",
      },
      count: 0,
      countnum: 0,
      //默认关闭弹出框
      dialogVisible: false,
      //显示的数据
      tableData: [],
      multipleSelection: [],
      ids: [],
    };
  },

  created() {
    this.ListData();
    this.totalcount();
  },
  methods: {
    //获取总条数方法
    totalcount() {
      GetCount().then((res) => {
        this.countnum = res.data;
      });
    },
    totalcount() {
      GetTotaocount().then((res) => {
        this.countnum = res.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.ruleFormData.pageSize = val;
      this.ListData();
    },
    handleCurrentChange(val) {
      this.ruleFormData.pageIndex = val;
      this.ListData();
    },
    //显示方法
    ListData() {
      GetCategoryPage(this.ruleFormData).then((res) => {
        this.tableData = res.data.data;
        this.count = res.data.totalCount;
        if (this.tableData == "") {
          this.$message({
            message: "未查询到数据",
            type: "error",
          });
        }
      });
    },

    //表格显示具体时间
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return 1;
      }
      let dt = new Date(data);
      return (
        dt.getFullYear() +
        "-" +
        (dt.getMonth() + 1) +
        "-" +
        dt.getDate() +
        " " +
        dt.getHours() +
        ":" +
        dt.getMinutes() +
        ":" +
        dt.getSeconds()
      );
    },
  },
};
</script>
